<template>
  <el-dialog class="chat-item" :visible="dialogVisible" :title="showTitle" :before-close="closeDialog">
    <div class="content">
      <div class="chatRecords" @click="emojiVisible = false">
        <div class="record-box server">
          <div class="chat" ref="chat">
            <!-- 客户聊天列表 -->
            <div v-for="(item,j) in history" :key="j">
              <!-- 左边 -->
              <div class="item acea-row row-top" v-if="item.send_type == 1">
                <div class="pictrue">
                  <el-image v-if="item.service" :src="item.service && item.service.avatar && item.service.avatar !='' ? item.service.avatar : headerIcon" mode=""></el-image>
                  <el-image v-else-if="item.user" :src="item.user.avatar && item.user.avatar !=''? item.user.avatar : headerIcon" mode=""></el-image>
                
                </div>
                <div class="text">
                  <div class="acea-row">
                    <!--退款訂單链接-->
                    <a target="_blank" v-if="item.msn_type === 6 && item.refundOrder.refund_order_id"  open-type="redirect" :href="'/order_detail?orderId='+item.refundOrder.order_id">
                      <div class="broadcast-details_num">
                        <span>{{$t('Refund.No')}}：{{ item.refundOrder.refund_order_sn }}</span>
                      </div>
                      <div class="conter acea-row row-middle">
                        <div class="broadcast-details_order noPad" v-for="(val, inx) in item.refundOrder.refundProduct">
                          <div class="broadcast-details_box noPad" v-if="inx == 0">
                            <div class="broadcast_details_img">
                              <el-image :src="val.product.cart_info.product.image" />
                              <div class="broadcast_details_model">
                                {{item.refundOrder.refund_num}}PCS
                              </div>
                            </div>
                            <div class="broadcast_details_picBox noPad">
                              <div class="broadcast_details_tit" v-text="val.product.cart_info.product.store_name"></div>
                              <div class="broadcast_details_pic">
                                ${{ val.product.cart_info.productAttr.price }}
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </a>
                    <!--訂單链接-->
                    <div v-if="item.msn_type === 5 && item.orderInfo.order_id">
                      <div class="broadcast-details_num acea-row row-middle">
                        <span>{{$t('page.chat.refundNo')}}：{{ item.orderInfo.order_sn }}</span>
                        <button class="copy" @click.stop="copyText(item.orderInfo.order_sn)">{{$t('page.chat.copy')}}</button>
                      </div>
                      <a target="_blank" :href="'/order_detail?orderId='+item.orderInfo.order_id" open-type="redirect" class="conter acea-row row-middle">
                        <div class="broadcast-details_order noPad" v-for="(val, inx) in item.orderInfo.orderProduct">
                          <div class="broadcast-details_box noPad" v-if="inx == 0">
                            <div class="broadcast_details_img">
                              <el-image :src="val.cart_info.product.image" />
                              <div class="broadcast_details_model">
                                {{item.orderInfo.total_num}}PCS
                              </div>
                            </div>
                            <div class="broadcast_details_picBox noPad">
                              <div class="broadcast_details_tit" v-text="val.cart_info.product.store_name"></div>
                              <div class="broadcast_details_pic">
                                ${{ item.orderInfo.pay_price }}
                              </div>
                            </div>
                          </div>
                        </div>
                      </a>
                    </div>

                    <!--商品链接-->
                    <div class="conter acea-row row-middle" v-if="item.msn_type === 4 && item.product">
                      <div class=" noPad">
                        <a target="_blank" class="acea-row row-column-around noPad" v-if="item.product.product_id" :href="`/goods_detail/${item.product.product_id}`" open-type="redirect">
                          <div class="broadcast_details_img_no">
                            <el-image :src="item.product.image" />
                          </div>
                          <div class="broadcast_details_picBox_no noPad">
                            <div class="broadcast_details_pic">
                              ${{ item.product.price }}
                            </div>
                            <div class="broadcast_details_tit_no line1" v-text="item.product.store_name"></div>
                          </div>
                        </a>
                      </div>
                    </div>
                    <!--預售商品链接-->
                    <div class="conter acea-row row-middle" v-if="item.msn_type === 7 && item.presell && item.presell.product">
                      <div class=" noPad">
                        <a target="_blank" class="acea-row row-column-around noPad" v-if="item.presell.product_presell_id" :href="`/goods_seckill_detail/${item.presell.product_presell_id}`" open-type="redirect">
                          <div class="broadcast_details_img_no">
                            <el-image :src="item.presell.product.image" />
                          </div>
                          <div class="broadcast_details_picBox_no noPad">
                            <div class="broadcast_details_pic">
                              ${{ item.presell.price }}
                            </div>
                            <div class="broadcast_details_tit_no line1" v-text="item.presell.store_name"></div>
                          </div>
                        </a>
                      </div>
                    </div>
                    <!--拼团商品链接-->
                    <div class="conter acea-row row-middle" v-if="item.msn_type === 8 && item.productGroup && item.productGroup.product">
                      <div class="noPad">
                        <a target="_blank" class="acea-row row-column-around noPad" v-if="item.productGroup.product_group_id" :href="`/goods_seckill_detail/${item.productGroup.product_group_id}`" open-type="redirect">
                          <div class="broadcast_details_img_no">
                            <el-image :src="item.productGroup.product.image" />
                          </div>
                          <div class="broadcast_details_picBox_no noPad">
                            <div class="broadcast_details_pic">
                              ${{ item.productGroup.product.price }}
                            </div>
                            <div class="broadcast_details_tit_no line1" v-text="item.productGroup.product.store_name"></div>
                          </div>
                        </a>
                      </div>
                    </div>
                    <div class="conter acea-row row-middle" v-if="item.msn_type === 3">
                      <el-image :src="item.msn" @click="clickImg(item.msn)"  mode="heightFix" />
                    </div>
                    <div class="conter acea-row row-middle" v-if="item.msn_type === 2">
                      <i class="em" :class="item.msn"></i>
                    </div>
                    <div class="conter acea-row row-middle" v-if="item.msn_type === 1">
                      {{ item.msn }}
                    </div>
                  </div>
                </div>
              </div>
              <!-- 右边 -->
              <div class="item acea-row row-top row-right" v-else>
                <div class="text textR">
                  <div class="acea-row ">
                    <!--退款訂單链接-->
                    <a target="_blank" v-if="item.msn_type === 6 && item.refundOrder.refund_order_id" open-type="redirect" :href="'/order_detail?orderId='+item.refundOrder.order_id">
                      <div class="broadcast-details_num">
                        <span>{{$t('page.chat.refundNo')}}：{{ item.refundOrder.refund_order_sn }}</span>
                      </div>
                      <div class="conter acea-row row-middle">
                        <div class="broadcast-details_order noPad" v-for="(val, inx) in item.refundOrder.refundProduct">
                          <div class="broadcast-details_box noPad" v-if="inx == 0">
                            <div class="broadcast_details_img">
                              <el-image :src="val.product.cart_info.product.image" />
                              <div class="broadcast_details_model">
                                
                              </div>
                            </div>
                            <div class="broadcast_details_picBox noPad">
                              <div class="broadcast_details_tit" v-text="val.product.cart_info.product.store_name"></div>
                              <div class="broadcast_details_pic">
                                {{$t('page.chat.total')}}{{item.refundOrder.refund_num}}PCS，
                                {{$t('page.chat.allPay')}} ${{ item.refundOrder.refund_price }}
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </a>
                    <!--訂單链接-->
                    <div v-if="item.msn_type === 5 && item.orderInfo.order_id">
                      <div class="broadcast-details_num acea-row row-middle">
                        <span>{{$t('page.chat.orderNo')}}：{{ item.orderInfo.order_sn }}</span>
                        <button class="copy" @click.stop="copyText(item.orderInfo.order_sn)">{{$t('page.chat.copy')}}</button>
          
                      </div>
                      <a target="_blank" :href="'/order_detail?orderId='+item.orderInfo.order_id" open-type="redirect" class="conter acea-row row-middle">
      
                        <div class="broadcast-details_order noPad" v-for="(val, inx) in item.orderInfo.orderProduct">
                          <div class="broadcast-details_box noPad" v-if="inx == 0">
                            <div class="broadcast_details_img">
                              <el-image :src="val.cart_info.product.image" />
                              <div class="broadcast_details_model">
                                {{item.orderInfo.total_num}}PCS
                              </div>
                            </div>
                            <div class="broadcast_details_picBox noPad">
                              <div class="broadcast_details_tit" v-text="val.cart_info.product.store_name"></div>
                              <div class="broadcast_details_pic">
                                ${{ item.orderInfo.pay_price }}
                              </div>
                            </div>
                          </div>
                        </div>
                      </a>
                    </div>
                    <!--商品链接-->
                    <div class="conter acea-row row-middle" v-if="item.msn_type === 4 && item.product">
                      <div class="acea-row row-column-around noPad">
                        <a target="_blank" class="acea-row row-column-around noPad" v-if="item.product.product_id" :href="`/goods_detail/${item.product.product_id}`" open-type="redirect">
                          <div class="broadcast_details_img_no">
                            <el-image :src="item.product.image" />
                          </div>
                          <div class="broadcast_details_picBox_no noPad">
                            <div class="broadcast_details_pic">
                              ${{ item.product.price }}
                            </div>
                            <div class="broadcast_details_tit_no line1" v-text="item.product.store_name"></div>
                          </div>
                        </a>
                      </div>
                    </div>
                    <!--預售商品链接-->
                    <div class="conter acea-row row-middle" v-if="item.msn_type === 7 && item.presell && item.presell.product">
                      <div class="acea-row row-column-around noPad">
                        <a target="_blank" class="acea-row row-column-around noPad" v-if="item.presell.product_presell_id" :href="`/goods_seckill_detail/${item.presell.product_presell_id}`" open-type="redirect">
                          <div class="broadcast_details_img_no">
                            <el-image :src="item.presell.product.image" />
                          </div>
                          <div class="broadcast_details_picBox_no noPad">
                            <div class="broadcast_details_pic">
                              ${{ item.presell.price }}
                            </div>
                            <div class="broadcast_details_tit_no line1" v-text="item.presell.store_name"></div>
                          </div>
                        </a>
                      </div>
                    </div>
                    <!--拼团商品链接-->
                    <div class="conter acea-row row-middle" v-if="item.msn_type === 8 && item.productGroup && item.productGroup.product">
                      <div class=" acea-row row-column-around noPad">
                        <a target="_blank" class="acea-row row-column-around noPad" v-if="item.productGroup.product_group_id" :href="`/goods_seckill_detail/${item.productGroup.product_group_id}`" open-type="redirect">
                          <div class="broadcast_details_img_no">
                            <el-image :src="item.productGroup.product.image" />
                          </div>
                          <div class="broadcast_details_picBox_no noPad">
                            <div class="broadcast_details_pic">
                              ${{ item.productGroup.product.price }}
                            </div>
                            <div class="broadcast_details_tit_no line1" v-text="item.productGroup.product.store_name"></div>
                          </div>
                        </a>
                      </div>
                    </div>
                    <div class="conter acea-row row-middle" v-if="item.msn_type === 3">
                      <el-image :src="item.msn" @click="clickImg(item.msn)" mode="heightFix" />
                    </div>
                    <div class="conter acea-row row-middle" v-if="item.msn_type === 2">
                      <i class="em" :class="item.msn"></i>
                    </div>
                    <div class="conter acea-row row-middle" v-if="item.msn_type === 1">
                      {{ item.msn }}
                    </div>
                  </div>
                </div>
                <div class="pictrue">
                  <el-image :src="item.user.avatar && item.user.avatar !='' ? item.user.avatar : headerIcon"/>				
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    <div class="chatFooter" >
        <div class="fun-item">
          <span class="icon-btn" @click="emojiVisible = !emojiVisible"><i class="iconfont icon-biaoqing1" /></span>
          <el-upload
            class="upload-image"
            :action="upLoadUrl"
            :show-file-list="false"
            :on-success="handleSuccess"
            >
              <i class="el-icon-picture-outline"></i>
          </el-upload>
        </div>
        <!-- <div class="emoji-box" v-if="emojiVisible">
          <div class="emoji-item" v-for="emoji in emojiList" :key="emoji"> 
            <i class="em" :class="emoji"  @click.stop="addEmoji(emoji)"></i>
          </div>
        </div> -->
        <div @click="emojiVisible = false">
          <el-input type="textarea"
            :rows="3"
            placeholder="请输入文字内容"
            v-model="msg"
          />
        </div>
        <div class="btn-box">
          <el-button @click="handSend(msg)">发送</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
  import socket from '@/plugins/webSocket'
  // import emojiList from "@/utils/emoji"
  import headerIcon from "@/assets/images/f.png"

  export default {
    name:"chatItem",
    props:{
      dialogVisible:{type:Boolean},
      title:{type:String},
      mer_id:{type:Number},
      uId:{type:Number},
    },
    data() {
      return {
        upLoadUrl: process.env.BASE_URL + "/api/upload/image/file",
        page:1,
        limit:30,
        loading: false,
				loaded: false,
				history: [],
        productInfo:'',
        orderInfo:'',
        cartInfo:'',
        refundInfo:'',
        storeInfo:'',
        socketClient:'',
        msg: '',
        timer:'',
        fileList:[],
        userList:[],
        // emojiList:emojiList,
        userId:0,
        showTitle:'',
        emojiVisible:false,
        presellId:this.pPresellId,
        combinationId:this.pCombinationId,
        productId:this.pProductId,
        orderId:0,
        headerIcon:headerIcon,
      }
    },
    watch:{
      dialogVisible(val){
        if(val) {
          this.showTitle = this.title
          this.page = 1
          this.history = []
          this.initSocket()
          this.initData()
        } else {
          this.wsEnd()
        }
      }
    },
    methods:{
      async initData() {
        console.log("========$auth.user======",this.$auth.user)
        this.getHistory()

      },
      // ws關闭
			wsEnd() {
        if(this.socketClient && 1 === this.socketClient.readyState) {
          this.socketClient.send({
            data: {
              mer_id: this.mer_id
            },
            type: "chat_end"
          });
          this.socketClient && this.socketClient.close();
        }
			},
      open() {
        console.log("连接成功",this.socketClient.readyState)
        this.timer = setInterval(()=>{
          if(this.socketClient.readyState === 1){
            this.socketClient.send(JSON.stringify({
              type: "ping"
            }));
          }
        }, 10000);
      },
      error() {
        console.log("连接错误")
      },
      close(e){
        console.log("close:",e)
      },
      getMessage(msg) {
        const msgType = ["reply", "chat", "send_chat"]
        const data =JSON.parse(msg.data)
        if(data.type === "err_tip"){
          this.$message.error(data.data)
        }
        if(msgType.includes(data.type)) {
          this.history = [...this.history,data.data]
          this.setScrollTop();
        }
      },
      sendMsg(msn,type) {
        const data = {
          data: {
            msn,
            msn_type: type,
            mer_id: this.mer_id
          },
          type:"send_chat" 
        }
        const msgStr = JSON.stringify(data)
        if(this.socketClient) {
          this.socketClient.send(msgStr)
        }
      },
      handSend(text) {
        this.sendMsg(text,1)
        this.msg = ''
      },
      initSocket() {
        const local = this.$cookies.get('auth.strategy');
        const token = this.$cookies.get(`auth._token.${local}`).split(' ')[1];
        if (!this.socketClient || this.socketClient.readyState !== this.socketClient.open) {
          this.socketClient = socket(token,'agent')
          // 监听socket连接
          this.socketClient.onopen = this.open
          // 监听socket错误信息
          this.socketClient.onerror = this.error
          // 监听socket消息
          this.socketClient.onmessage = this.getMessage
          this.socketClient.onclose  = this.close
        }
      },
      closeDialog(){
        this.$emit('close',false)
      },
      // 用户聊天記錄
			getHistory() {
				if (this.loading || this.loaded) return;
				this.loading = true;
				this.$axios.get("api/agent_service/history/"+this.mer_id,{
          params:{
						page: this.page,
						limit: this.limit
          }
        })
					.then(({
						data
					}) => {
						this.history = data.list.concat(this.history);
            if (this.page === 1) {
							this.$nextTick(()=> {
								this.setScrollTop();
							});
            
            }
						this.page++;
						this.loading = false;
						this.loaded = data.length < this.limit;
					})
					.catch(err => {
            this.$message.error( err.msg || "Loading failed")
					});
			},
      // 获取店鋪详情
			async getStoreDetail() {
				await this.$axios("api/store/merchant/detail/"+this.mer_id).then(res => {
					this.storeInfo = res.data
				})
			},
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePrediv(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      handleSuccess(response) {
        if (response.status === 200) {
          this.sendMsg(response.data.path,3)
        } else if (response.status === 400) {
          this.$message.error(response.msg);
        }
      },
      addEmoji(name) {
				this.sendMsg(name, 2);
        this.emojiVisible = false
			},
      /**复制*/
      copyText(text) {
        const input = document.createElement('textarea')
        input.value = text
        document.body.appendChild(input)
        input.select()
        const success = document.execCommand('copy')

        document.body.removeChild(input)
        return success
      },
      setScrollTop() {
        setTimeout(()=>{
          let scrollElem = this.$refs.chat;
          if(scrollElem){
            scrollElem.scrollTo({ top: scrollElem .scrollHeight, behavior: 'smooth' });
          }
        },500)

			},
    }
  }
</script>
<style lang="scss">
  @import url("@/plugins/emoji-awesome/css/google.min.css");
  
  .chat-item {
    background: transparent;

    .el-dialog{
      min-width: 600px;
      

      .el-dialog__title{
        color: #fff;
      }
      .el-dialog__body{
        padding: 0px;
      }
      .el-dialog__header{
        min-height: 50px;
        background: linear-gradient(270deg,#1890ff,#3875ea);
      }
      .el-dialog__close{
        color: #fff;
      }
    }
    .upload-image{
      font-size: 24px;
      display: inline-block;
    }
    .chatRecords{
      height: 400px;
      .broadcast-details_num {
        width: 100%;
        height: 36px;
        line-height: 36px;
        color: #666666;
        font-size: 13px;
        display: flex;
        justify-content: space-between;
        background: #fff;
        border-bottom: 1px solid #F5F5F5;
        padding: 0 12px;
        border-radius: 5px 5px 0 0;
        .line1{
          max-width: 101px;
        }
      }
      .record-box{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        align-items: flex-start;
        height: 100%;
        position: relative;
      }

      .user_list {
        width: 300px;
        overflow: auto;
        height: 100%;
        border-right: 1px solid #ececec;

        .item {
          align-items: center;
          border-bottom: 1px solid #eee;
          padding: 10px 15px;
          background-color: #fff;
          .logo .image{
            width: 44px;
            height: 44px;
            border-radius: 50%;
          }
          .info{
            width: 117px;
            margin-left: 10px;
            .con{
              margin-top: 5px;
              color: #999999;
              font-size: 12px;
            }
          }
          .right-box{
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            font-size: 10px;
            color: #BBBBBB;
            .time{
              margin-bottom: 5px;
            }
            .num{
              min-width: 6px;
              background-color:  #E93323;
              border-radius: 15px;
              font-size: 10px;
              padding: 0 4px;
              font-size: 10px;
              color: #fff;
            }
          }
        }
      }
     

      .chat {
        padding: 1px 11px 0 11px;
        margin-bottom: 3px;
        width: calc(100% - 200px);
        height: 100%;
        overflow: auto;
        background-color:#f7f7f7;
       
      }
      .server{
        .chat{
          width: 100%;
        }
      }
      

      .chat .item {
        margin-top: 9px;
        align-items: flex-start;
      }

      .chat .item .pictrue {
        width: 40px;
        height: 40px;
        margin-top: 5px;
      }

      .chat .item .pictrue image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }

      .chat .item .text {
        margin-left: 10px;
      }

      .chat .item .text.textR {
        text-align: right;
        margin: 0 10px 0 0;
      }

      .chat .item .text .name {
        font-size: 12px;
        color: #999;
      }

      .chat .item .text .name .return {
        color: #509efb;
        margin-left: 8px;
      }

      .chat .item .text.textR .name .return {
        margin: 0 0.17rem 0 0;
      }

      .chat .item .text .conter {
        background-color: #fff;
        border-radius: 8px;
        padding: 8px 10px;
        font-size: 14px;
        color: #333;
        position: relative;
        max-width: 300px;
        margin-top: 2px;
        word-break: break-all;
        .em{
          margin: 0;
        }
      }

      .chat .item .text .spot {
        width: 15px;
        height: 15px;
        background-color: #c00000;
        border-radius: 50%;
        margin-left: 20px;
      }

      .chat .item .text .conter img {
        /* #ifdef H5 */
        width: 100%;
        /* #endif */
        display: block;
      }

      .chat .item .text .conter .signal {
        width: 24px;
        height: 24px;
      }

      .chat .item .text .conter .signal.signalR {
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
      }

      .footer_count{
        // margin-top: 10px;
        // position: fixed;
        // bottom: 60px;
        // left: 10px;
        // z-index: 10;
       
        .broadcast-details_box,.broadcast_box{
          margin-bottom: 0;
          position: relative;
          display: flex;
          padding: 20px;
        }
        .broadcast_box{
          flex-direction: column;
        }
        .icon-guanbi{
          font-size: 14px;
          color: #C4C4C4;
          position: absolute;
          right: 10px;
          top: 10px;
        }
      }

      .broadcast-details_box {
        padding: 10px;
        display: flex;
        background: #fff;
        border-radius: 0 0 10px 5px;
        margin-bottom: 12px;
      }
      
      .broadcast_details_img .el-image{
        width: 80px;
        height: 80px;
        margin-right: 10px;
      }
      .broadcast_details_img_no {
        width: 228px;
        height: 228px;
        border-radius: 10px 10px 0px 0px;
        overflow: hidden;
        margin-bottom: 5px;
      }

      .broadcast_details_picBox_no {
        width: 228px;
      }

      .broadcast_details_img_no uni-image, .broadcast_details_img_no img{
        width: 100%;
        height: 100%;
      }
      
    }
    .chatFooter{
      border-top: 1px solid #ececec;
      position: relative;
      .fun-item{
        padding: 10px 10px;
      }
      .el-textarea__inner{
        border: none;
        outline: none;
        resize: none;
        white-space: pre-wrap;
        word-wrap: break-word;
      }
      .btn-box{
        padding: 5px 10px;
        text-align: right;
      }
      .icon-btn {
        display: inline-block;
        width: 30px;
        height: 30px;
        text-align: center;
        margin-right: 10px;
        .iconfont{
          font-size: 24px;
        }
      }

    }
    .emoji-box{
      position: absolute;
      z-index: 100;
      bottom:170px;
      left: 10px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap:wrap;
      padding: 20px;
      width: 90%;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

      .emoji-item{
        width: 35px;
        height: 35px;
        text-align: center;
      }
    }
    .broadcast_details_tit {
      font-size: 15px;
      color: #282828;
      height: 20px;
      max-width: 90%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      text-align: left !important;
      
    }
    .product_price {
      margin-top: 33px;
    }
    .broadcast_details_btn {
      width: 65px;
      height: 25px;
      background: #e83323;
      opacity: 1;
      border-radius: 62px;
      color: #fff;
      font-size: 12px;
      text-align: center;
      line-height: 25px;
      margin-top: 16px;
      float: right;
    }
    .broadcast_details_btn.product_btn{
        margin-top: 0;
        float: none;
    }
    .footer_count {
      margin-top: 10px;
      position: absolute;
      bottom: 0px;
      left: 0px;
      z-index: 10;
      background-color: #fff;
    }
    .broadcast_details_model {
      width: 100%;
      height: 21px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 0px 0px 8px 8px;
      position: absolute;
      z-index: 2;
      bottom: 0;
      font-size: 11px;
      color: #fff;
      text-align: center;
      line-height: 21px;
    }
    .broadcast_details_img {
        width: 80px;
        height: 80px;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }
    .broadcast_details_picBox {
        width: 75%;
        margin-left: 12px;
    }
    .broadcast_details_pic {
        margin-top: 7px;
        font-size: 12px;
        color: #999999;
        text-align: left;
    }
  }

</style>